<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画板</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <canvas id="canvas" width="100" height="100"></canvas>
   <script>
       let canvas = document.getElementById("canvas");
       canvas.width = document.documentElement.clientWidth
       canvas.height = document.documentElement.clientHeight
      /*画线*/
      let ctx = canvas.getContext("2d");
      ctx.fillStyle = "black";
      ctx.strokeStyle = 'black'
      ctx.lineWidth = 8;
      ctx.lineCap = "round";
      let painting = false
      let last

      var isTouchDevice = 'ontouchstart' in document.documentElement;
      if(isTouchDevice){
          canvas.ontouchstart = (e) =>{
            let x = e.touches[0].clientX
            let y = e.touches[0].clientY
              last = [x,y]
          }
        canvas.ontouchmove = (e) => {
            let x = e.touches[0].clientX
            let y = e.touches[0].clientY
            drawLine(last[0],last[1],x,y)
              last = [x,y]
        }
      }else{
        canvas.onmousedown = (e) => {
          painting = true
          last = [e.clientX,e.clientY]
          console.log(last)
      }
      canvas.onmousemove = (e) => {
          if (painting ===true){
              console.log(last)
              drawLine(last[0],last[1],e.clientX,e.clientY)
              last = [e.clientX,e.clientY]
      }
    }
      canvas.onmouseup = () => {
      painting = false;
      }
      }
      
      function drawLine(x1,y1,x2,y2){
          ctx.beginPath();
          ctx.moveTo(x1,y1);
          ctx.lineTo(x2,y2);
          ctx.stroke();
      }
   </script>
</body>
</html>